<!-- IssueRecord.vue -->
<template>
  <view class="viewport">
    <!-- 上报记录列表 -->
    <scroll-view class="scroll-view" scroll-y>
      <view v-if="issueList.length > 0" class="issue-list">
        <view class="item" v-for="item in issueList" :key="item.reportId">
          <view class="item-content">
            <view class="header">
              <text class="tree-id">树木ID: {{ item.treeId }}</text>
              <text :class="['status', statusMap[item.status].class]">{{ statusMap[item.status].text }}</text>
            </view>
            <view class="content">
              <view class="type-description">
                <text class="type">{{ issueTypeMap[item.issueType] }}</text>
                <text class="description">{{ item.description }}</text>
              </view>
              <view class="photos" v-if="item.photoUrls && item.photoUrls.length > 0">
                <image 
                  v-for="(photo, index) in item.photoUrls" 
                  :key="index"
                  :src="photo" 
                  class="photo"
                  mode="aspectFill"
                  @tap="previewImage(item.photoUrls, index)"
                ></image>
              </view>
              <view class="contact" v-if="item.contactInfo">
                联系方式: {{ item.contactInfo }}
              </view>
              <view class="report-time">
                上报时间: {{ formatTime(item.reportTime) }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="blank">暂无异常上报记录</view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getIssueRecordsAPI } from '../../services/Issue'

const issueList = ref([])
const issueTypeMap = {
  0: '位置错误',
  1: '状态变化',
  2: '信息错误',
  3: '图片问题',
  4: '其他'
}

const statusMap = {
  0: { text: '未处理', class: 'status-0' },
  1: { text: '处理中', class: 'status-1' },
  2: { text: '已解决', class: 'status-2' },
  3: { text: '需复查', class: 'status-3' }
}

// 获取上报记录列表
const getIssueRecords = async () => {
  const res = await getIssueRecordsAPI()
  issueList.value = res.data
}

// 格式化时间显示
const formatTime = (timeStr) => {
  const date = new Date(timeStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
}

// 预览图片
const previewImage = (urls, index) => {
  uni.previewImage({
    urls,
    current: index
  })
}

onMounted(() => {
  getIssueRecords()
})
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f4f4f4;

  .scroll-view {
     flex: 1;
    padding-top: 20rpx;
    height: 100%; /* 添加这行确保滚动区域占满剩余空间 */
  }
}

.issue-list {
  padding: 0 20rpx;
  margin: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .item {
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border-bottom: none;
    }
  }

  .item-content {
    padding: 30rpx 20rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding-bottom: 15rpx;
      border-bottom: 1rpx dashed #eee;

      .tree-id {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }

      .status {
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        font-size: 24rpx;
      }

      .status-0 {
        background-color: #fff0f0;
        color: #cf4444;
      }

      .status-1 {
        background-color: #fff8e6;
        color: #fa8c16;
      }

      .status-2 {
        background-color: #f0f9f0;
        color: #52c41a;
      }

      .status-3 {
        background-color: #f0f0ff;
        color: #2f54eb;
      }
    }

    .content {
      .type-description {
        margin-bottom: 20rpx;

        .type {
          display: inline-block;
          padding: 4rpx 10rpx;
          margin-right: 15rpx;
          background-color: #e6f7ff;
          color: #1890ff;
          border-radius: 4rpx;
          font-size: 24rpx;
        }

        .description {
          font-size: 26rpx;
          color: #333;
        }
      }

      .photos {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        margin-bottom: 20rpx;

        .photo {
          width: 150rpx;
          height: 150rpx;
          border-radius: 8rpx;
        }
      }

      .contact,
      .report-time {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .report-time {
        margin-bottom: 0;
      }
    }
  }
}

.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}
</style>